<template>
  <div class="product">
    <div  target="_blank">
      <div class="img-box">
        <a :href="`${product.shopDomain}/kcDetails/${product.goodsId}`"
           target="_blank">
          <img v-lazyload.cdn="product.goodsPicture" width="100%" :alt="product.title"/>
        </a>

        <div class="mark">
          <span class="price" v-if="product.isPhonePrice === 1 || product.minPrice === -4008600550">电议</span>
          <span class="price" v-else>￥{{ product.minPrice }}元/{{ product.measure }}</span>
        </div>
      </div>

      <!--正常显示-->
      <div class="nomarl-show">
        <p class="price">
          <span v-if="product.isPhonePrice === 1 || product.minPrice === -4008600550">电议</span>
          <span v-else>￥{{product.minPrice}}元<span v-if="product.measure">/{{ product.measure }}</span></span>

        </p>

        <h4 class="title text-overflow" >
          <a :href="`${product.shopDomain}/kcDetails/${product.goodsId}`"
             :title="product.title | htmlTag" v-html="product.title "
             class="text-primay-hover"
          ></a>
        </h4>

        <p class="desc text-overflow">
          <a :href="`${product.shopDomain}`"
             target="_blank"
             class="text-primay-hover"
             :title="product.companyName | htmlTag"
             v-html="product.companyName"></a>
        </p>

        <div class="address clearfix">
          <address class="pull-left location ">
            <i class="icon icon-location"></i>
            <span class="address-txt text-overflow"
                  :title="`${ product.compProvinceName }${product.compCityName}`">{{ product.compProvinceName
              }}{{product.compCityName}}</span>
          </address>

          <span class="pull-right">{{models[product.compCategory]}}</span>
        </div>

        <p class="tags">
          <el-tooltip
            popper-class="icon-tooltip"
            placement="top"
            v-if="product.userLevelCode > 1"
            trigger="hover"
            :content="({2:'黄金会员', 3:'铂金会员'})[product.userLevelCode]">
            <i class="icon" :class="`icon-vip${product.userLevelCode}`"></i>
          </el-tooltip>

          <el-tooltip
            popper-class="icon-tooltip"
            placement="top"
            trigger="hover"
            v-if="product.validStatus === 2"
            content="已认证">
            <i class="icon icon-auth"></i>
          </el-tooltip>
        </p>
      </div>

      <!--鼠标划过显示-->
      <ul class="buy-info">
        <li>
          <span class="key">品位(%)：</span>
          <span class="value text-overflow" :title="`${product.goodsAttr.grade}`" v-html="`${product.goodsAttr.grade}`"></span>
        </li>
        <li>
          <span class="key">产地：</span>
          <span class="value text-overflow" v-html="product.goodsAttr.producingPlace"  :title="product.goodsAttr.producingPlace | htmlTag"></span>
        </li>
        <li>
          <span class="key">交货地：</span>
          <span class="value text-overflow" v-html="product.goodsAttr.deliveryPoint" :title="product.goodsAttr.deliveryPoint | htmlTag"></span>
        </li>
        <li>
          <span class="key">提货方式：</span>
          <span class="value text-overflow" v-html="product.goodsAttr.deliveryMode" :title="product.goodsAttr.deliveryMode  | htmlTag"></span>
        </li>
        <li>
          <span class="key">付款方式：</span>
          <span class="value text-overflow">{{ product.goodsAttr.payMode}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      product: {
        type: Object,
        'default' () {
          return {
            goodsAttr: {}
          }
        }
      }
    },

    data () {
      return {
        models: {
          1: '工厂',
          2: '贸易商',
          3: '工贸一体'
        }
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import "../element-variables";

  .product {
    padding: 10px;
    border: 1px solid #dedede;
    font-size: 12px;
    width: 225px;
    background-color: #fff;
    height: 366px;
    overflow: hidden;

    img {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }

    &:hover {
      border-color: $--color-primary;
    }

    .img-box:hover {
      & ~ .nomarl-show {
        display: none;
      }

      & ~ .buy-info {
        display: block;
      }

      .mark {
        bottom: 0;
      }
    }
  }

  .img-box {
    text-align: center;
    height: 206px;
    vertical-align: middle;
    position: relative;
    overflow: hidden;

    .mark {
      position: absolute;
      height: 34px;
      line-height: 34px;
      bottom: -34px;
      left: 0;
      width: 100%;
      background-color: rgba($--color-primary-light-1,.9);
      padding: 0 10px;
      text-align: left;
      color: #fff;
      transition: bottom .3s;

      .price {
        font-size: 16px;
      }

      .weight {
        float: right;
      }
    }
  }

  .nomarl-show {
    .price {
      font-size: 18px;
      margin-top: 10px;
      color: #ff2400;
    }

    .title {
      line-height: 20px;
      color: #3e3e3e;
      font-size: 14px;
      font-weight: normal;
      /*padding: 5px 0 10px;*/
    }

    .desc {
      color: #6e6e6e;
    }

    .address {
      padding: 7px 0 10px;
      font-size: 12px;
    }

    .address-txt {
      padding: 0 7px;
      display: inline-block;
      vertical-align: middle;
      width: 120px;
    }
    .location {
      color: #6e6e6e;
      font-weight: normal;
      font-style: normal;
    }

    .tags {
      border-top: 1px solid #dedede;
      padding-top: 8px;
    }
    .icon {

      & + .icon {
        margin-left: 10px;
      }
    }
  }

  .buy-info {
    display: none;
    padding-top: 6px;
    li {
      line-height: 26px;
      color: #6e6e6e;
      height: 26px;
    }

    .key {
      width: 72px;
      float: left;
      color: #3e3e3e;
    }

    .value {
      float: left;
      width: 100px;
    }
  }
</style>
